<template>
    <div class="funds-list" id="app">
        <!-- 添加按钮 -->
        <div>
            <el-form ref="add_data" :model="search_data">
                <!-- 筛选 -->
                <div style="display: flex; align-items: center; justify-content: center">
                <el-form-item label="住宿人名字">
                <el-input
                    style="width: 200px; margin-right: 20px"
                    v-model="search_data.username1"
                    placeholder="填写住宿人姓名"
                />
                </el-form-item>
                <el-form-item label="医护复责人">
                <el-input style="width: 200px" v-model="search_data.accommodationmanager1" placeholder="填写医护复责人名字" />
                </el-form-item>
                <el-button @click="onReset" style="margin-bottom: 22px; margin-left: 60px">重置</el-button>
                <el-button type="primary" style="margin-bottom: 22px" icon="Search" @click="handleSearch"
                >搜索</el-button
                >
            </div>
                <el-form-item class="btnRight">
                    <el-button type="primary" size="small" @click="handleAdd" v-if="user.identify == '超级管理员'"><el-icon>
                            <Plus />
                        </el-icon>添加</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- table部分 -->
        <div class="table_container">
            <el-table :data="tableData" style="width: 100%" max-height="450" stripe>
                <el-table-column label="序号" width="70" prop="id"> </el-table-column>
                <el-table-column label="住宿编号" width="120" prop="accommodationnumber">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <el-icon>
                                <timer />
                            </el-icon>
                            <span style="margin-left: 10px">{{ scope.row.accommodationnumber }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="床号" width="120" prop="bednumber">
                </el-table-column>
                <el-table-column label="住宿人姓名" width="130" prop="username">
                </el-table-column>
                <el-table-column label="年龄" width="100" prop="age">
                    <template #default="scope">
                        <span style="color: #00d053">{{ scope.row.age }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="性别" width="100" prop="sex">
                    <template #default="scope">
                        <span style="color: #f56767">{{ scope.row.sex }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="医护负责人" width="150" prop="accommodationmanager">
                    <template #default="scope">
                        <span style="color: #4db3ff">{{ scope.row.accommodationmanager }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="操作" prop="operation" width="180" v-if="user.identify == '超级管理员'">
                    <template #default="scope">
                        <el-button size="small" type="warning" @click="handleEdit(scope.$index, scope.row)">
                            <el-icon>
                                <Edit />
                            </el-icon>编辑</el-button>
                        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
                            <el-icon>
                                <Delete />
                            </el-icon>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-row>
                <el-col :span="24">
                    <div class="pagination">
                        <el-pagination v-model:current-page="paginations.page_index" :page-size="paginations.page_size"
                            :page-sizes="paginations.page_sizes" :layout="paginations.layout" :total="paginations.total"
                            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                    </div>
                </el-col>
            </el-row>
        </div>

        <dialog-vue :dialog="dialog" @update="getProfile" :formData="formData"></dialog-vue>
    </div>
</template>
  
<script setup>
import { Timer, Edit, Delete, Plus, Search } from "@element-plus/icons";
import { ref, onMounted, getCurrentInstance, computed } from "vue";
import DialogVue from "@/components/accommodation_dialog.vue";
import { useStore } from "vuex";
const store = useStore();
const { proxy } = getCurrentInstance();

const user = computed(() => {
    return store.getters.user;
});

const search_data = ref({
    username1: "",
    accommodationmanager1: "",
});
let filterTableData = ref([]);

const paginations = ref({
    page_index: 1, // 当前位于那页
    total: 0, // 总数
    page_size: 5, // 一页显示多少条
    page_sizes: [5, 10, 15, 20], // 每页显示多少条
    layout: "total, sizes, prev, pager, next, jumper", // 翻页属性
});

let tableData = ref([]);
let allTableData = ref([]);
let dialog = ref({ show: false, title: "", option: "edit" });
const formData = ref({
    accommodationnumber: "",
    bednumber: "",
    username: "",
    age: "",
    sex: "",
    accommodationmanager: "",
    id: "",
});

const getProfile = () => {
    // 获取表格数据
    proxy.$axios
        .get("/accommodation/all")
        .then((res) => {
            allTableData.value = res.data;
            filterTableData.value = res.data;
            // 设置分页数据
            setPaginations();
        })
        .catch((err) => {
            console.log(err);
        });
};
const setPaginations = () => {
    // 分页属性设置
    paginations.value.total = allTableData.value.length;
    paginations.value.page_index = 1;
    paginations.value.page_size = 5;
    // 设置默认的分页数据
    tableData.value = allTableData.value.filter((item, index) => {
        return index < paginations.value.page_size;
    });
};
const handleEdit = (index, row) => {
    // 编辑
    dialog.value = {
        show: true,
        title: "修改",
        option: "edit",
    };

    formData.value = {
        accommodationnumber: row.accommodationnumber,
        bednumber: row.bednumber,
        username: row.username,
        age: row.age,
        sex: row.sex,
        accommodationmanager: row.accommodationmanager,
        id: row.id,
    };
};

const handleDelete = (index, row) => {
    proxy.$axios.post(`/accommodation/delete/${row.id}`).then((res) => {
        proxy.$message("删除成功！");
        getProfile();
    });
};

const handleAdd = () => {
    // 添加
    dialog.value = {
        show: true,
        title: "添加",
        option: "add",
    };

    formData.value = {
        accommodationnumber: "",
        bednumber: "",
        username: "",
        age: "",
        sex: "",
        accommodationmanager: "",
        id: "",
    };
};

const handleSizeChange = (page_size) => {
    // 切换size
    paginations.value.page_index = 1;
    paginations.value.page_size = page_size;
    tableData.value = allTableData.value.filter((item, index) => {
        return index < page_size;
    });
};

const handleCurrentChange = (page) => {
    // 获取当前页
    let index = paginations.value.page_size * (page - 1);
    // 数据的总数
    let nums = paginations.value.page_size * page;
    // 容器
    let tables = ref([]);
    for (let i = index; i < nums; i++) {
        if (allTableData.value[i]) {
            tables.value.push(allTableData.value[i]);
        }

        tableData.value = tables.value;
    }
};

const getProfile1 = () => {
    console.log(search_data.value.accommodationmanager1)
    // 获取表格数据
    proxy.$axios
        .get("/accommodation/all1", {
            params:{accommodation:search_data.value.username1,accommodation2:search_data.value.accommodationmanager1}
        })
        .then((res) => {
            console.log(res);
            allTableData.value = res.data.data;
            filterTableData.value = res.data.data;
            // 设置分页数据
            setPaginations();
        })
        .catch((err) => {
            console.log(err);
        });
};
const handleSearch = () => {
    // 筛选
    // 如果任何一个时间为空 就不筛选
    // if (!search_data.value.startTime || !search_data.value.endTime) {
    //     proxy.$message({
    //         type: "warning",
    //         message: "请选择时间区间",
    //     });
    //     getProfile();
    //     return;
    // }

    // const sTime = search_data.value.startTime.getTime();
    // const eTime = search_data.value.endTime.getTime();

    // allTableData.value = filterTableData.value.filter((item) => {
    //     let date = new Date(item.createtime);
    //     let time = date.getTime();
    //     return time >= sTime && time <= eTime;
    // });
    getProfile1();
    // 分页数据
    setPaginations();
};
onMounted(() => {
    getProfile();
});
</script>
  
<style lang="less" scoped>
.funds-list {
    margin-left: 200px;
    padding: 16px;
    box-sizing: border-box;

    // 筛选部分
    .search {
        float: left;
        display: flex;

        .el-form-item {
            margin-right: 10px;
        }
    }

    .btnRight {
        float: right;
    }

    // 分页
    .pagination {
        float: right;
        margin-top: 10px;
    }
}
</style>
  